<template>
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal"
              theme="dark"
              active-name="1">
          <div class="layout-nav">
            <MenuItem name="1"
                      :to="{name: 'designModal', path: '/designModal'}">
            <Icon type="ios-navigate"></Icon>
            设计模式
            </MenuItem>
            <MenuItem name="2">
            <Icon type="ios-keypad"></Icon>
            item
            </MenuItem>
            <MenuItem name="3">
            <Icon type="ios-analytics"></Icon>
            item
            </MenuItem>
            <MenuItem name="4">
            <Icon type="ios-paper"></Icon>
            Item 4
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Layout :style="{ padding: '0 50px' }">
        <Breadcrumb :style="{ margin: '16px 0' }"></Breadcrumb>
        <Content :style="{ padding: '24px 0', height: '600px', background: '#fff' }">
          <Layout>
            <Sider hide-trigger
                   :style="{ background: '#fff', top: '10px' }">
              <Menu active-name="1-1"
                    theme="light"
                    width="auto"
                    :open-names="['1-1']">
                <Submenu name="1">
                  <template slot="title">
                    <Icon type="ios-navigate"></Icon>
                    CSS相关
                  </template>
                  <MenuItem name="1-1">
                  <router-link to="/">sticky</router-link>
                  </MenuItem>
                  <MenuItem name="1-2">
                  <router-link to="/rightArrow">右箭头</router-link>
                  </MenuItem>
                  <MenuItem name="1-3">
                  <router-link to="/flexBox">垂直水平居中/box-shadow/flex-wrap</router-link>
                  </MenuItem>
                </Submenu>
                <Submenu name="2">
                  <template slot="title">
                    <Icon type="ios-keypad"></Icon>
                    JS相关
                  </template>
                  <MenuItem name="2-1">
                  <router-link to="/debounce">防抖</router-link>
                  </MenuItem>
                  <MenuItem name="2-2">
                  <router-link to="/throttle">节流</router-link>
                  </MenuItem>
                  <MenuItem name="2-3">
                  <router-link to="/regExp">正则表达式</router-link>
                  </MenuItem>
                  <MenuItem name="2-4">
                  <router-link to="/deepClone">深度克隆</router-link>
                  </MenuItem>
                  <MenuItem name="2-5">
                  <router-link to="/testType">通用数据类型测试</router-link>
                  </MenuItem>
                  <MenuItem name="2-6">
                  <router-link to="/string">字符串常用方法</router-link>
                  </MenuItem>
                  <MenuItem name="2-7">
                  <router-link to="/arr">数组常用方法</router-link>
                  </MenuItem>
                </Submenu>
                <Submenu name="3">
                  <template slot="title">
                    <Icon type="ios-book"></Icon>
                    Vue相关
                  </template>
                  <MenuItem name="3-1">
                  <router-link to="/vue">组件间通信</router-link>
                  </MenuItem>
                  <MenuItem name="3-2">
                  <router-link to="/vuexStore">vuex实现通信</router-link>
                  </MenuItem>
                </Submenu>
              </Menu>
            </Sider>
            <Content :style="{ padding: '24px', height: '600px', background: '#fff' }">
              <router-view />
            </Content>
          </Layout>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    showModal () {
      console.log(222)
      this.$router.push({
        path: '/designModal',
        name: 'designModal'
      })
    }
  }
}
</script>
<style>
.ivu-layout-header {
  position: fixed;
  width: 100%;
}
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.layout a {
  color: #666;
}
.layout a:active,
a:hover {
  color: #2d8cf0;
}
.layout-footer-center {
  text-align: center;
}
</style>
